<template>
  <div class="search-bar">
    <el-input v-model="inputData" placeholder="Please input" class="input-with-select"
      @keyup.enter.native="handleSearchEvent">
      <template #prepend  v-if="isShow === '1'">
        <el-select v-model="select" placeholder="Select" style="width: 115px">
          <el-option label="项目搜索" value="1" />
          <el-option label="委托搜索" value="2" />
        </el-select>
      </template>
      <template #append>
        <el-button :icon="Search" @click="handleSearchEvent">搜索</el-button>
      </template>
    </el-input>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const props = defineProps({
  selectTarget: {
    type: String,
    required: false,
    default: '1'
  },
  isShow: {
    type: String,
    required: false,
    default: '1'
  },
})
const inputData = ref('')
const select = ref('1')
const isShow = ref('1')
select.value = props.selectTarget as string
isShow.value = props.isShow as string

// 定义清空项目/委托数组，重新获取项目/委托事件
const emit = defineEmits(['clearArrEvent'])
// 触发切换登录注册事件的方法
const clearArrFunc = (item: any) => {
  emit('clearArrEvent', item)
}

// 搜索事件
const handleSearchEvent = () => {
  console.log(select.value + '触发搜索事件' + inputData.value)
  if(select.value === '1') {
    console.log('项目搜索');
    clearArrFunc(select.value)
    // sessionStorage.setItem('proSearch', inputData.value);
    router.push({
      path: '/codeTrade',
      query: {
        proSearch: inputData.value,
      }
    })
    router
  }else if(select.value === '2') {
    console.log('委托搜索');
    clearArrFunc(select.value)
    // sessionStorage.setItem('entSearch', inputData.value)
    router.push({
      path: '/codeEntrust',
      query: {
        entSearch: inputData.value,
      }
    })
  }
}


</script>

<style lang="less" scoped>
.search-bar {
  // min-width: 1200px;
  background-color: #fff;
  padding-top: 20px;

  .input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
  }

  &> :deep(.el-input) {
    height: 50px;
    border: 2px solid #03A9F4;
    z-index: 100;
  }

  :deep(.el-input) {
    color: #000 !important;

    .el-input-group__prepend {
      box-sizing: border-box;
      height: 46px;
      border: none;
      box-shadow: none;

      .el-input {
        height: 47px;
        line-height: 47px;
        border-radius: 0;
      }
    }

    button {
      height: 50px;
      color: #fff;
      background-color: #03A9F4;
    }
  }
}
</style>